<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据看板系统 - 数据查询</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 全局样式 - 科技感设计 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      padding: 20px;
      color: #e2e8f0;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: rgba(15, 23, 42, 0.8);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(94, 234, 212, 0.3);
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .logo-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
    }
    
    .logo-text {
      font-size: 28px;
      font-weight: 700;
      color: #f8fafc;
      text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
    }
    
    .logo-text span {
      color: #5eead4;
    }
    
    .nav-buttons {
      display: flex;
      gap: 15px;
    }
    
    .nav-button {
      background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
      color: white;
      padding: 12px 25px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(167, 139, 250, 0.3);
    }
    
    .nav-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
      background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    }
    
    .nav-button.active {
      background: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%);
    }
    
    .page-title {
      text-align: center;
      font-size: 36px;
      margin: 20px 0 40px;
      background: linear-gradient(90deg, #8b5cf6, #0ea5e9, #10b981);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    
    .page-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 3px;
      background: linear-gradient(90deg, #8b5cf6, #0ea5e9, #10b981);
      border-radius: 3px;
    }
    
    /* 查询区域样式 */
    .search-section {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
      padding: 25px;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      margin-bottom: 30px;
      border: 1px solid rgba(94, 234, 212, 0.1);
    }
    
    .search-section h2 {
      color: #f8fafc;
      margin-bottom: 20px;
      font-size: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .search-section h2 i {
      color: #0ea5e9;
    }
    
    .search-form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .form-group label {
      font-weight: 600;
      color: #94a3b8;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .form-group label i {
      color: #5eead4;
      font-size: 14px;
    }
    
    .form-control {
      padding: 14px 18px;
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(94, 234, 212, 0.2);
      border-radius: 8px;
      font-size: 16px;
      color: #e2e8f0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .form-control:focus {
      outline: none;
      border-color: #0ea5e9;
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
    }
    
    select.form-control {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 15px center;
      padding-right: 40px;
    }
    
    .search-actions {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 10px;
    }
    
    .search-btn {
      background: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%);
      color: white;
      border: none;
      padding: 14px 35px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
    }
    
    .search-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4);
      background: linear-gradient(135deg, #38bdf8 0%, #14b8a6 100%);
    }
    
    .reset-btn {
      background: transparent;
      color: #94a3b8;
      border: 1px solid rgba(94, 234, 212, 0.2);
      padding: 14px 35px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
    }
    
    .reset-btn:hover {
      color: #e2e8f0;
      border-color: rgba(94, 234, 212, 0.4);
      background: rgba(30, 41, 59, 0.5);
    }
    
    /* 结果区域样式 */
    .results-section {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
      padding: 25px;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(94, 234, 212, 0.1);
      margin-bottom: 30px;
    }
    
    .results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(94, 234, 212, 0.1);
    }
    
    .results-title {
      font-size: 20px;
      font-weight: 600;
      color: #f8fafc;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .results-title i {
      color: #0ea5e9;
    }
    
    .results-stats {
      display: flex;
      gap: 20px;
      color: #94a3b8;
      font-size: 15px;
    }
    
    .results-stats span {
      color: #5eead4;
      font-weight: 600;
    }
    
    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
      min-width: 1000px;
    }
    
    .data-table th,
    .data-table td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid rgba(94, 234, 212, 0.1);
    }
    
    .data-table th {
      background: rgba(15, 23, 42, 0.5);
      font-weight: 600;
      color: #e2e8f0;
      position: sticky;
      top: 0;
    }
    
    .data-table tr:hover {
      background: rgba(56, 189, 248, 0.05);
    }
    
    .data-table .highlight {
      color: #5eead4;
      font-weight: 600;
    }
    
    .action-icon {
      color: #94a3b8;
      cursor: pointer;
      margin-right: 15px;
      transition: color 0.3s;
      font-size: 18px;
    }
    
    .action-icon:hover {
      color: #0ea5e9;
    }
    
    .action-icon:last-child:hover {
      color: #ef4444;
    }
    
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #94a3b8;
    }
    
    .empty-state i {
      font-size: 48px;
      margin-bottom: 15px;
      color: #475569;
    }
    
    .empty-state h3 {
      font-size: 20px;
      margin-bottom: 8px;
      color: #e2e8f0;
    }
    
    /* 分页样式 */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
    }
    
    .page-btn {
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(94, 234, 212, 0.2);
      color: #94a3b8;
      width: 40px;
      height: 40px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .page-btn:hover {
      background: rgba(30, 41, 59, 0.9);
      color: #e2e8f0;
      border-color: rgba(94, 234, 212, 0.4);
    }
    
    .page-btn.active {
      background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
      color: white;
      border-color: rgba(139, 92, 246, 0.5);
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
    }
    
    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .pagination-info {
      color: #94a3b8;
      font-size: 15px;
    }
    
    /* 图片预览模态框 */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .modal.show {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
    }
    
    .modal-image {
      max-width: 100%;
      max-height: 80vh;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .close-modal {
      position: absolute;
      top: -40px;
      right: 0;
      color: white;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.5);
    }
    
    /* 通知提示框 */
    .notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 15px 25px;
      background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
      color: white;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .notification.show {
      transform: translateY(0);
      opacity: 1;
    }

    /* 编辑模态框 */
    .edit-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .edit-modal.show {
      opacity: 1;
      visibility: visible;
    }
    
    .edit-modal-content {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border-radius: 16px;
      padding: 30px;
      width: 90%;
      max-width: 800px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    .edit-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(94, 234, 212, 0.1);
    }
    
    .edit-modal-title {
      font-size: 22px;
      font-weight: 600;
      color: #f8fafc;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .edit-modal-title i {
      color: #0ea5e9;
    }
    
    .close-edit-modal {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 24px;
      cursor: pointer;
      transition: color 0.3s;
    }
    
    .close-edit-modal:hover {
      color: #e2e8f0;
    }
    
    .edit-form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    
    .edit-form-actions {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
      gap: 15px;
      margin-top: 20px;
    }
    
    .delete-btn {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
    }
    
    .delete-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
      background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    }
    
    /* 确认对话框 */
    .confirm-dialog {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1010;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .confirm-dialog.show {
      opacity: 1;
      visibility: visible;
    }
    
    .confirm-dialog-content {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border-radius: 16px;
      padding: 30px;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    .confirm-dialog-header {
      margin-bottom: 20px;
      text-align: center;
    }
    
    .confirm-dialog-icon {
      font-size: 48px;
      color: #fbbf24;
      margin-bottom: 15px;
    }
    
    .confirm-dialog-title {
      font-size: 20px;
      font-weight: 600;
      color: #f8fafc;
      margin-bottom: 10px;
    }
    
    .confirm-dialog-message {
      color: #94a3b8;
      text-align: center;
      margin-bottom: 25px;
    }
    
    .confirm-dialog-actions {
      display: flex;
      justify-content: center;
      gap: 15px;
    }
    
    /* 状态指示灯 */
    .status-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    .status-online {
      background-color: #10b981;
      box-shadow: 0 0 8px #10b981;
    }
    
    .status-offline {
      background-color: #f87171;
    }
    
    .connection-status {
      position: fixed;
      bottom: 20px;
      left: 20px;
      padding: 8px 16px;
      background: rgba(15, 23, 42, 0.9);
      border-radius: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    /* 截图缩略图 */
    .screenshot-thumbnail {
      width: 60px;
      height: 40px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid rgba(94, 234, 212, 0.3);
      transition: transform 0.3s;
    }
    
    .screenshot-thumbnail:hover {
      transform: scale(1.1);
    }
    
    /* 导出按钮 */
    .export-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: white;
      border: none;
      padding: 14px 25px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    }
    
    .export-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4);
      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    }
    
    /* 响应式设计 */
    @media (max-width: 1024px) {
      .search-form {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }
      
      .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      
      .data-table {
        min-width: 800px;
      }
    }
    
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
      }
      
      .nav-buttons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }
      
      .page-title {
        font-size: 28px;
        margin: 10px 0 25px;
      }
      
      .page-title::after {
        width: 150px;
      }
      
      .search-actions {
        flex-direction: column;
      }
      
      .search-btn, .reset-btn, .export-btn {
        width: 100%;
        justify-content: center;
      }
      
      .edit-form {
        grid-template-columns: 1fr;
      }
      
      .pagination {
        flex-wrap: wrap;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">
        <div class="logo-icon"><i class="fas fa-chart-network"></i></div>
        <div class="logo-text">数据<span>看板</span>系统</div>
      </div>
      <div class="nav-buttons">
        <a href="index.html" class="nav-button"><i class="fas fa-home"></i> 首页</a>
        <a href="upload.html" class="nav-button"><i class="fas fa-cloud-upload-alt"></i> 数据上传</a>
        <a href="query.html" class="nav-button active"><i class="fas fa-search"></i> 数据查询</a>
        <a href="ranking.html" class="nav-button"><i class="fas fa-trophy"></i> 排行榜</a>
      </div>
    </header>
    
    <h1 class="page-title"><i class="fas fa-search"></i> 数据查询中心</h1>
    
    <!-- 查询条件区域 -->
    <section class="search-section">
      <h2><i class="fas fa-filter"></i> 查询条件</h2>
      <form class="search-form">
        <div class="form-group">
          <label for="startDate"><i class="fas fa-calendar-alt"></i> 开始日期</label>
          <input type="date" id="startDate" class="form-control">
        </div>
        
        <div class="form-group">
          <label for="endDate"><i class="fas fa-calendar-day"></i> 结束日期</label>
          <input type="date" id="endDate" class="form-control">
        </div>
        
        <div class="form-group">
          <label for="hallFilter"><i class="fas fa-building"></i> 厅名筛选</label>
          <select id="hallFilter" class="form-control">
            <option value="all">全部厅名</option>
            <!-- 厅名选项将动态加载 -->
          </select>
        </div>
        
        <div class="form-group">
          <label for="hostSearch"><i class="fas fa-user"></i> 主持人搜索</label>
          <input type="text" id="hostSearch" class="form-control" placeholder="输入主持人姓名">
        </div>
        
        <div class="search-actions">
          <button type="button" id="searchBtn" class="search-btn">
            <i class="fas fa-search"></i> 执行查询
          </button>
          <button type="button" id="resetBtn" class="reset-btn">
            <i class="fas fa-sync-alt"></i> 重置条件
          </button>
          <button type="button" id="exportBtn" class="export-btn">
            <i class="fas fa-file-export"></i> 导出数据
          </button>
        </div>
      </form>
    </section>
    
    <!-- 结果区域 -->
    <section class="results-section">
      <div class="results-header">
        <div class="results-title">
          <i class="fas fa-table"></i> 查询结果
        </div>
        <div class="results-stats">
          <div>总记录数: <span id="totalRecords">0</span></div>
          <div>查询耗时: <span id="queryTime">0</span>ms</div>
        </div>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th>上传时间</th>
            <th>厅名</th>
            <th>主持人</th>
            <th>数据值</th>
            <th>数据截图</th>
            <th>大头数据值</th>
            <th>大头截图</th>
            <th>主持-厅名</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="dataTableBody">
          <!-- 数据将从数据库加载 -->
          <tr>
            <td colspan="9" class="empty-state">
              <i class="fas fa-search"></i>
              <h3>请设置查询条件并点击查询</h3>
              <p>默认查询最近7天的数据</p>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div class="pagination" id="pagination">
        <!-- 分页控件将动态生成 -->
      </div>
    </section>
    
    <footer>
      <p>数据看板系统 © 2023 | 实时数据监控与分析平台</p>
      <p style="margin-top: 8px; font-size: 13px; color: #64748b;">版本 2.1.0 | 最后更新: 2025-08-06</p>
    </footer>
  </div>

  <!-- 图片预览模态框 -->
  <div class="modal" id="imageModal">
    <div class="modal-content">
      <button class="close-modal" id="closeImageModal">&times;</button>
      <img src="" alt="数据截图预览" class="modal-image" id="modalImage">
    </div>
  </div>
  
  <!-- 编辑数据模态框 -->
  <div class="edit-modal" id="editModal">
    <div class="edit-modal-content">
      <div class="edit-modal-header">
        <h3 class="edit-modal-title"><i class="fas fa-edit"></i> 编辑数据记录</h3>
        <button class="close-edit-modal" id="closeEditModal">&times;</button>
      </div>
      
      <form class="edit-form" id="editForm">
        <input type="hidden" id="editRecordId">
        
        <div class="form-group">
          <label for="editUploadTime"><i class="fas fa-clock"></i> 上传时间</label>
          <input type="datetime-local" id="editUploadTime" class="form-control">
        </div>
        
        <div class="form-group">
          <label for="editHallName"><i class="fas fa-building"></i> 厅名</label>
          <select id="editHallName" class="form-control">
            <option value="">请选择厅名</option>
            <!-- 厅名选项将动态加载 -->
          </select>
        </div>
        
        <div class="form-group">
          <label for="editHostName"><i class="fas fa-user"></i> 主持人</label>
          <input type="text" id="editHostName" class="form-control" placeholder="输入主持人姓名">
        </div>
        
        <div class="form-group">
          <label for="editDataValue"><i class="fas fa-chart-line"></i> 数据值</label>
          <input type="number" id="editDataValue" class="form-control" placeholder="输入数据值">
        </div>
        
        <div class="form-group">
          <label for="editBigHeadValue"><i class="fas fa-chart-pie"></i> 大头数据值</label>
          <input type="number" id="editBigHeadValue" class="form-control" placeholder="输入大头数据值（可选）">
        </div>
        
        <div class="form-group">
          <label for="editHostHall"><i class="fas fa-link"></i> 主持-厅名</label>
          <input type="text" id="editHostHall" class="form-control" placeholder="输入主持-厅名组合">
        </div>
        
        <div class="edit-form-actions">
          <button type="button" id="cancelEditBtn" class="reset-btn">
            <i class="fas fa-times"></i> 取消
          </button>
          <button type="button" id="saveEditBtn" class="search-btn">
            <i class="fas fa-save"></i> 保存修改
          </button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 确认删除对话框 -->
  <div class="confirm-dialog" id="confirmDialog">
    <div class="confirm-dialog-content">
      <div class="confirm-dialog-header">
        <div class="confirm-dialog-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3 class="confirm-dialog-title">确认删除</h3>
      </div>
      <p class="confirm-dialog-message">您确定要删除这条数据记录吗？此操作无法撤销。</p>
      <div class="confirm-dialog-actions">
        <button type="button" id="cancelDeleteBtn" class="reset-btn">
          <i class="fas fa-times"></i> 取消
        </button>
        <button type="button" id="confirmDeleteBtn" class="delete-btn">
          <i class="fas fa-trash"></i> 确认删除
        </button>
      </div>
    </div>
  </div>

  <!-- 通知提示框 -->
  <div class="notification" id="notification">
    <i class="fas fa-check-circle"></i>
    <div>操作成功</div>
  </div>
  
  <!-- 连接状态指示器 -->
  <div class="connection-status" id="connectionStatus">
    <span class="status-indicator status-online"></span>
    <span>后端服务已连接</span>
  </div>

  <script>
    const API_BASE_URL = 'http://localhost:3000/api/data';
    let currentPage = 1;
    const pageSize = 10;
    let totalPages = 1;
    let currentResults = [];
    let recordToDelete = null;
    
    document.addEventListener('DOMContentLoaded', function() {
      // 设置默认日期为最近7天
      const today = new Date();
      const sevenDaysAgo = new Date();
      sevenDaysAgo.setDate(today.getDate() - 7);
      
      document.getElementById('startDate').value = sevenDaysAgo.toISOString().split('T')[0];
      document.getElementById('endDate').value = today.toISOString().split('T')[0];
      
      // 加载厅名列表
      loadHallList();
      
      // 关闭模态框事件
      document.getElementById('closeImageModal').addEventListener('click', function() {
        document.getElementById('imageModal').classList.remove('show');
      });
      
      document.getElementById('closeEditModal').addEventListener('click', function() {
        document.getElementById('editModal').classList.remove('show');
      });
      
      document.getElementById('cancelEditBtn').addEventListener('click', function() {
        document.getElementById('editModal').classList.remove('show');
      });
      
      document.getElementById('cancelDeleteBtn').addEventListener('click', function() {
        document.getElementById('confirmDialog').classList.remove('show');
        recordToDelete = null;
      });
      
      // 确认删除事件
      document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        if (recordToDelete) {
          deleteRecord(recordToDelete);
        }
      });
      
      // 保存编辑事件
      document.getElementById('saveEditBtn').addEventListener('click', function() {
        saveEditedRecord();
      });
      
      // 查询按钮事件
      document.getElementById('searchBtn').addEventListener('click', function() {
        currentPage = 1;
        loadDataFromServer();
      });
      
      // 重置按钮事件
      document.getElementById('resetBtn').addEventListener('click', function() {
        const today = new Date();
        const sevenDaysAgo = new Date();
        sevenDaysAgo.setDate(today.getDate() - 7);
        
        document.getElementById('startDate').value = sevenDaysAgo.toISOString().split('T')[0];
        document.getElementById('endDate').value = today.toISOString().split('T')[0];
        document.getElementById('hallFilter').value = 'all';
        document.getElementById('hostSearch').value = '';
        
        currentPage = 1;
        loadDataFromServer();
      });
      
      // 导出按钮事件
      document.getElementById('exportBtn').addEventListener('click', function() {
        exportData();
      });
      
      // 点击模态框外部关闭
      window.addEventListener('click', function(event) {
        const imageModal = document.getElementById('imageModal');
        const editModal = document.getElementById('editModal');
        const confirmDialog = document.getElementById('confirmDialog');
        
        if (event.target === imageModal) {
          imageModal.classList.remove('show');
        }
        
        if (event.target === editModal) {
          editModal.classList.remove('show');
        }
        
        if (event.target === confirmDialog) {
          confirmDialog.classList.remove('show');
          recordToDelete = null;
        }
      });
      
      // 模拟WebSocket连接状态
      simulateWebSocket();
    });
    
    // 从服务器加载数据
    async function loadDataFromServer() {
      try {
        const startTime = performance.now();
        
        // 获取筛选条件
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        const hallFilter = document.getElementById('hallFilter').value;
        const hostSearch = document.getElementById('hostSearch').value;
        
        // 构建查询参数
        const params = new URLSearchParams();
        if (startDate) params.append('startDate', startDate);
        if (endDate) params.append('endDate', endDate);
        if (hallFilter && hallFilter !== 'all') params.append('hallName', hallFilter);
        if (hostSearch) params.append('hostName', hostSearch);
        params.append('page', currentPage);
        params.append('pageSize', pageSize);
        
        // 调用API获取数据
        const response = await fetch(`${API_BASE_URL}/query?${params.toString()}`);
        if (!response.ok) throw new Error('获取数据失败');
        
        const result = await response.json();
        const data = result.data;
        totalPages = Math.ceil(result.totalCount / pageSize);
        currentResults = data;
        
        // 计算查询耗时
        const endTime = performance.now();
        const queryTime = Math.round(endTime - startTime);
        
        // 更新统计数据
        document.getElementById('totalRecords').textContent = result.totalCount;
        document.getElementById('queryTime').textContent = queryTime;
        
        const tableBody = document.getElementById('dataTableBody');
        tableBody.innerHTML = '';
        
        if (data.length === 0) {
          tableBody.innerHTML = `
            <tr>
              <td colspan="9" class="empty-state">
                <i class="fas fa-search"></i>
                <h3>没有找到匹配的数据</h3>
                <p>请尝试调整筛选条件</p>
              </td>
            </tr>
          `;
          document.getElementById('pagination').innerHTML = '';
          return;
        }
        
        // 填充表格数据
        data.forEach(item => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${new Date(item.upload_time).toLocaleString()}</td>
            <td>${item.hall_name}</td>
            <td>${item.host_name}</td>
            <td class="highlight">${Number(item.data_value).toLocaleString()}</td>
            <td>${item.data_screenshot ? `<img src="${item.data_screenshot}" alt="数据截图" class="screenshot-thumbnail" data-src="${item.data_screenshot}">` : '-'}</td>
            <td>${item.big_head_value ? Number(item.big_head_value).toLocaleString() : '-'}</td>
            <td>${item.big_head_screenshot ? `<img src="${item.big_head_screenshot}" alt="大头数据截图" class="screenshot-thumbnail" data-src="${item.big_head_screenshot}">` : '-'}</td>
            <td>${item.host_hall}</td>
            <td>
              <i class="fas fa-edit action-icon" title="编辑" data-id="${item.id}"></i>
              <i class="fas fa-trash action-icon" title="删除" data-id="${item.id}"></i>
            </td>
          `;
          tableBody.appendChild(row);
        });
        
        // 绑定图片点击事件
        document.querySelectorAll('.screenshot-thumbnail').forEach(img => {
          img.addEventListener('click', function() {
            const src = this.getAttribute('data-src');
            document.getElementById('modalImage').src = src;
            document.getElementById('imageModal').classList.add('show');
          });
        });
        
        // 绑定编辑和删除事件
        bindActionEvents();
        
        // 更新分页控件
        updatePagination();
        
        // 显示成功通知
        showNotification('查询成功！');
        
      } catch (error) {
        console.error('加载数据失败:', error);
        showNotification(`加载数据失败: ${error.message}`, true);
      }
    }
    
    // 绑定编辑和删除事件
    function bindActionEvents() {
      // 编辑事件
      document.querySelectorAll('.fa-edit.action-icon').forEach(icon => {
        icon.addEventListener('click', function() {
          const recordId = this.getAttribute('data-id');
          openEditModal(recordId);
        });
      });
      
      // 删除事件
      document.querySelectorAll('.fa-trash.action-icon').forEach(icon => {
        icon.addEventListener('click', function() {
          const recordId = this.getAttribute('data-id');
          recordToDelete = recordId;
          document.getElementById('confirmDialog').classList.add('show');
        });
      });
    }
    
    // 打开编辑模态框
    function openEditModal(recordId) {
      const record = currentResults.find(item => item.id === recordId);
      if (!record) return;
      
      // 填充表单数据
      document.getElementById('editRecordId').value = record.id;
      
      // 格式化日期时间为datetime-local格式
      const date = new Date(record.upload_time);
      const formattedDateTime = date.toISOString().slice(0, 16);
      document.getElementById('editUploadTime').value = formattedDateTime;
      
      document.getElementById('editHallName').value = record.hall_name;
      document.getElementById('editHostName').value = record.host_name;
      document.getElementById('editDataValue').value = record.data_value;
      document.getElementById('editBigHeadValue').value = record.big_head_value || '';
      document.getElementById('editHostHall').value = record.host_hall;
      
      // 显示模态框
      document.getElementById('editModal').classList.add('show');
    }
    
    // 保存编辑的记录
    async function saveEditedRecord() {
      const recordId = document.getElementById('editRecordId').value;
      if (!recordId) return;
      
      try {
        const updatedRecord = {
          upload_time: document.getElementById('editUploadTime').value,
          hall_name: document.getElementById('editHallName').value,
          host_name: document.getElementById('editHostName').value,
          data_value: document.getElementById('editDataValue').value,
          big_head_value: document.getElementById('editBigHeadValue').value || null,
          host_hall: document.getElementById('editHostHall').value
        };
        
        const response = await fetch(`${API_BASE_URL}/${recordId}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(updatedRecord)
        });
        
        if (!response.ok) throw new Error('更新数据失败');
        
        // 关闭模态框并刷新数据
        document.getElementById('editModal').classList.remove('show');
        loadDataFromServer();
        
        showNotification('数据已成功更新');
        
      } catch (error) {
        console.error('更新数据失败:', error);
        showNotification(`更新数据失败: ${error.message}`, true);
      }
    }
    
    // 删除记录
    async function deleteRecord(recordId) {
      try {
        const response = await fetch(`${API_BASE_URL}/${recordId}`, {
          method: 'DELETE'
        });
        
        if (!response.ok) throw new Error('删除数据失败');
        
        // 关闭对话框并刷新数据
        document.getElementById('confirmDialog').classList.remove('show');
        loadDataFromServer();
        
        showNotification('数据已成功删除');
        
      } catch (error) {
        console.error('删除数据失败:', error);
        showNotification(`删除数据失败: ${error.message}`, true);
      } finally {
        recordToDelete = null;
      }
    }
    
    // 更新分页控件
    function updatePagination() {
      const paginationContainer = document.getElementById('pagination');
      paginationContainer.innerHTML = '';
      
      // 上一页按钮
      const prevBtn = document.createElement('button');
      prevBtn.className = 'page-btn';
      prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i>';
      prevBtn.disabled = currentPage === 1;
      prevBtn.addEventListener('click', function() {
        if (currentPage > 1) {
          currentPage--;
          loadDataFromServer();
        }
      });
      paginationContainer.appendChild(prevBtn);
      
      // 页码按钮 - 最多显示5个页码
      let startPage = Math.max(1, currentPage - 2);
      let endPage = Math.min(totalPages, startPage + 4);
      
      // 调整显示范围
      if (endPage - startPage < 4 && totalPages > 5) {
        startPage = Math.max(1, endPage - 4);
      }
      
      // 添加第一页按钮（如果当前范围不包含第一页）
      if (startPage > 1) {
        addPageButton(1);
        
        // 添加省略号
        if (startPage > 2) {
          const ellipsis = document.createElement('span');
          ellipsis.className = 'pagination-info';
          ellipsis.textContent = '...';
          paginationContainer.appendChild(ellipsis);
        }
      }
      
      // 添加中间页码
      for (let i = startPage; i <= endPage; i++) {
        addPageButton(i);
      }
      
      // 添加最后一页按钮（如果当前范围不包含最后一页）
      if (endPage < totalPages) {
        // 添加省略号
        if (endPage < totalPages - 1) {
          const ellipsis = document.createElement('span');
          ellipsis.className = 'pagination-info';
          ellipsis.textContent = '...';
          paginationContainer.appendChild(ellipsis);
        }
        
        addPageButton(totalPages);
      }
      
      // 下一页按钮
      const nextBtn = document.createElement('button');
      nextBtn.className = 'page-btn';
      nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>';
      nextBtn.disabled = currentPage === totalPages;
      nextBtn.addEventListener('click', function() {
        if (currentPage < totalPages) {
          currentPage++;
          loadDataFromServer();
        }
      });
      paginationContainer.appendChild(nextBtn);
      
      // 添加页码信息
      const pageInfo = document.createElement('span');
      pageInfo.className = 'pagination-info';
      pageInfo.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
      paginationContainer.appendChild(pageInfo);
    }
    
    // 添加页码按钮
    function addPageButton(pageNum) {
      const paginationContainer = document.getElementById('pagination');
      const pageBtn = document.createElement('button');
      pageBtn.className = `page-btn ${currentPage === pageNum ? 'active' : ''}`;
      pageBtn.textContent = pageNum;
      pageBtn.addEventListener('click', function() {
        currentPage = pageNum;
        loadDataFromServer();
      });
      paginationContainer.appendChild(pageBtn);
    }
    
    // 加载厅名列表
    async function loadHallList() {
      try {
        const response = await fetch('http://localhost:3000/api/data/halls');
        const halls = await response.json();
        
        const hallFilter = document.getElementById('hallFilter');
        const editHallName = document.getElementById('editHallName');
        
        // 保存当前选中值
        const currentFilterValue = hallFilter.value;
        
        // 清空现有选项（保留"全部厅名"）
        while (hallFilter.options.length > 1) {
          hallFilter.remove(1);
        }
        
        // 清空编辑框的厅名选项
        editHallName.innerHTML = '<option value="">请选择厅名</option>';
        
        // 添加厅名选项
        halls.forEach(hall => {
          // 添加到筛选下拉框
          const filterOption = document.createElement('option');
          filterOption.value = hall;
          filterOption.textContent = hall;
          hallFilter.appendChild(filterOption);
          
          // 添加到编辑框下拉框
          const editOption = document.createElement('option');
          editOption.value = hall;
          editOption.textContent = hall;
          editHallName.appendChild(editOption);
        });
        
        // 恢复选中值
        if (currentFilterValue && halls.includes(currentFilterValue)) {
          hallFilter.value = currentFilterValue;
        }
        
      } catch (error) {
        console.error('加载厅名列表失败:', error);
      }
    }
    
    // 导出数据
    async function exportData() {
      try {
        // 获取当前筛选条件
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        const hallFilter = document.getElementById('hallFilter').value;
        const hostSearch = document.getElementById('hostSearch').value;
        
        // 构建查询参数
        const params = new URLSearchParams();
        if (startDate) params.append('startDate', startDate);
        if (endDate) params.append('endDate', endDate);
        if (hallFilter && hallFilter !== 'all') params.append('hallName', hallFilter);
        if (hostSearch) params.append('hostName', hostSearch);
        
        // 创建下载链接
        const exportUrl = `${API_BASE_URL}/export?${params.toString()}`;
        const a = document.createElement('a');
        a.href = exportUrl;
        
        // 设置文件名
        const dateStr = new Date().toISOString().split('T')[0];
        a.download = `数据导出_${dateStr}.xlsx`;
        
        // 触发下载
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        
        showNotification('数据导出已开始');
        
      } catch (error) {
        console.error('导出数据失败:', error);
        showNotification(`导出数据失败: ${error.message}`, true);
      }
    }
    
    // 显示通知
    function showNotification(message, isError = false) {
      const notification = document.getElementById('notification');
      notification.innerHTML = isError 
        ? `<i class="fas fa-exclamation-circle"></i> <div>${message}</div>`
        : `<i class="fas fa-check-circle"></i> <div>${message}</div>`;
      
      notification.style.background = isError
        ? 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)'
        : 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
      
      notification.classList.add('show');
      
      setTimeout(() => {
        notification.classList.remove('show');
      }, 3000);
    }
    
    // 模拟WebSocket连接状态
    function simulateWebSocket() {
      const connectionStatus = document.getElementById('connectionStatus');
      const statusIndicator = connectionStatus.querySelector('.status-indicator');
      
      // 随机模拟连接状态变化（实际项目中应使用真实WebSocket）
      setInterval(() => {
        // 80%概率保持连接，20%概率短暂断开
        if (Math.random() < 0.2) {
          statusIndicator.className = 'status-indicator status-offline';
          connectionStatus.querySelector('span:last-child').textContent = '后端服务已断开';
          
          // 3秒后恢复连接
          setTimeout(() => {
            statusIndicator.className = 'status-indicator status-online';
            connectionStatus.querySelector('span:last-child').textContent = '后端服务已连接';
            showNotification('已重新连接到后端服务');
          }, 3000);
        }
      }, 30000);
    }
  </script>
</body>
</html>
    